<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>收货地址</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="address_box" id="app">
			<ul class="address_form">
				<li>
					<span>收货人</span>
					<div class="input">
						<input type="text" name="" id="" v-model="name" placeholder="请输入收货人姓名" />
					</div>
				</li>
				<li>
					<span>手机号码</span>
					<div class="input">
						<input type="number" name="" id="" v-model="mobile" placeholder="请输入收货人手机" />
					</div>
				</li>
				<li>
					<span>选择地区</span>
					<div class="input">
						<a href="javascript:;" id="city" >{{area_info}}</a>
						<img src="__API__/lib/images/more.png" alt="">
						<input type="hidden" name="area_info" v-model="area_info" placeholder="请选择地区" readonly />
					</div>
				</li>
				<li>
					<span>详细地址</span>
					<div class="input">
						<textarea v-model="address" placeholder="请输入详细地址"></textarea>
<!--						<div class="icon" @click="goDetail('position.html')"><img src="__API__/lib/images/position.png"-->
<!--								alt="" /> 定位</div>-->
					</div>
				</li>
			</ul>
			<div  v-if="types=='create'"  class="blue_btn"  @click="onSubmit()">保存</div>
			<div  v-if="types=='update'" class="blue_btn" @click="onSubmit2()">保存</div>
		</div>
		<script>
			$(function() {
				var mobileSelect = new MobileSelect({
					trigger: '#city',
					wheels: [{
						data: cityStr
					}],
					ensureBtnText: '确定',
					position: [1],
					callback: function(indexArr, data) {
						$('#city').css('color', '#333');
						app.$data.area_info = data[0].value +' '+ data[1].value +' '+ data[2].value;
					}
				});
			})
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					name: '',
					mobile: '',
					area_info: '请选择地区',
					address: '',
					types:'create',
					id:0
				},
				created: function() {
					var that = this;
					var id = "{:input('id',0)}";
					if(id>0){
						that.types = 'update';
					}
					if (common.getQueryStringRegExp("type") && common.getQueryStringRegExp("type") == 1) {
						var id = common.getQueryStringRegExp("id");
						console.log(id);
						// that.getData(id);
					}
					common.ajax("{:url('Address/view')}",{id:id} , function(res) {
						that.name = res.data.name;
						that.mobile = res.data.mobile
						that.area_info = res.data.area_info
						that.address = res.data.address
						that.status = res.data.status
						that.id = res.data.id

						// that.getData(searchValue);
					})
					
				},
				mounted(){
					let that = this;
					//回退
					if (document.addEventListener) {
						window.addEventListener('pageshow', function (e) {

							if (e.persisted || window.performance && window.performance.navigation.type == 2) {
								if (common.getCache('addressData')) {

									that.address = JSON.parse(common.getCache('addressData')).address + JSON.parse(
										common.getCache('addressData')).title;
								}
							}
						})
					}
				},
				methods: {
					//获取地址信息
					getData(id) {
						let that = this;
						common.ajax('', {
							id
						}, function(res) {
							if (res.success) {

							}
						})
					},
					back() {},
					goDetail(url) {
						common.openUrl(url)
					},
					onSubmit() {
						var that = this;
						var data = {
							name: that.name,
							mobile: that.mobile,
							area_info: that.area_info,
							address: that.address,
							status:2,
							token:localStorage.getItem('token')
						}
						if(!data.name){
							common.alert('请输入姓名',' ');return;
						}
						if(!data.mobile){
							common.alert('请输入手机号',' ');return;
						}
						if(data.area_info == '请选择地区'){
							common.alert('请选择城市',' ');return;
						}
						if(!data.address){
							common.alert('请输入地址',' ');return;
						}
						console.log('data', data);
						common.ajax("{:url('Address/create')}",data , function(res) {
							common.showToast(res.msg);
							if(res.code == 200){
								setTimeout(function () {
									common.PageBack();
									//window.history.go(-1);
								},1000);
							}

							// that.getData(searchValue);
						})
						// common.ajax('', data, function(res) {
						// 	if (res.success) {
						//
						// 	} else {
						// 		common.alert(res.msg, ' ')
						// 	}
						// })
					},					onSubmit2() {
						var that = this;
						var id = "{:input('id',0)}";
						var data = {
							name: that.name,
							mobile: that.mobile,
							area_info: that.area_info,
							address: that.address,
							status:2,
							id:id,
							token:localStorage.getItem('token')
						}
						if(!data.name){
							common.alert('请输入姓名',' ');return;
						}
						if(!data.mobile){
							common.alert('请输入手机号',' ');return;
						}
						if(data.area_info == '请选择地区'){
							common.alert('请选择城市',' ');return;
						}
						if(!data.address){
							common.alert('请输入地址',' ');return;
						}
						console.log('data', data);
						common.ajax("{:url('Address/update')}",data , function(res) {
							common.showToast(res.msg);
							if(res.code == 200){
								setTimeout(function () {
									common.PageBack();
								},1000);
							}

							// that.getData(searchValue);
						})
						// common.ajax('', data, function(res) {
						// 	if (res.success) {
						//
						// 	} else {
						// 		common.alert(res.msg, ' ')
						// 	}
						// })
					}
				}
			});
		</script>
	</body>

</html>
